<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			ul{
				background: red url() 0 0 no-repeat;
				float: left;
			}
			ul .box{
				width: 100px;
				height: 100px;
				background: blue url() 0 0 no-repeat;
				float: left;
				margin: 10px;
				list-style: none;
				font-size: 30px;
				color: #fff;
			}
			p{
				width: 50px;
				height: 50px;
				background: #A349A4;
				float: left;
			}

		</style>
		<script type="text/javascript">

			window.onload = function  () {
				// box1 = document.getElementById('box1');

				// box1.firstChild.style.backgroundColor="green";
				// del = document.getElementsByClassName('del');

				// for (var i = 0; i < del.length; i++) {
				// 	add_click(i);
				// };

				// function add_click (x) {
				// 	del[x].onclick = function  () {
				// 		del[x].parentNode.style.display="none";
				// 	}
				// }
				// obj  = document.createElement('span');

				// obj.innerHTML="我是加进来的";

				// obj.id="spanson";

				// obj.style.color="red";

				// son = document.getElementById('son');

				// baidu = document.getElementById('baidu');

				// // son.insertBefore(obj,baidu);
				// son.replaceChild(obj,baidu);
				// 
				 box1 = document.getElementById('box1');
				 box2 = document.getElementById('box2');
				 son = document.getElementById('son');
				 

				 box1.onclick = function  () {
				 	son1 = son.cloneNode();
				 	box1.appendChild(son1)
				 }

				 box2.onclick = function  () {
				 	son1 = son.cloneNode();
				 	box2.appendChild(son1)
				 }


			}
		</script>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				background: red;
				float: left;
			}
			.box2{
				width: 200px;
				height: 200px;
				background: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<!-- <ul>
			<li class="box" id="box1"><p id="son">学并思<a id="baidu" href="">百度一下</a></p></li>
			<li class="box">2</li>
			<li class="box">3</li>
		</ul> -->
		<div class="box1" id="box1">
			<p id="son">我是一个内容</p>
		</div>
		<div class="box2" id="box2"></div>
		<!-- <table border="1">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</tr>
			<tr class="father">
				<td>小明1</td>
				<td>19</td>
				<td class="del">删除</td>
			</tr>
			<tr class="father">
				<td>小明2</td>
				<td>19</td>
				<td class="del">删除</td>
			</tr >
			<tr class="father">
				<td>小明3</td>
				<td>19</td>
				<td class="del">删除</td>
			</tr>
			<tr class="father">
				<td>小明4</td>
				<td>19</td>
				<td class="del">删除</td>
			</tr>
			<tr class="father">
				<td>小明5</td>
				<td>19</td>
				<td class="del">删除</td>
			</tr>
		</table> -->
	</body>
</html>